<!DOCTYPE html>
<html lang="en">

	<head>
		<title>Matrix Admin</title>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/bootstrap-responsive.min.css" />
		<link rel="stylesheet" href="css/uniform.css" />
		<link rel="stylesheet" href="css/select2.css" />
		<link rel="stylesheet" href="css/matrix-style2.css" />
		<link rel="stylesheet" href="css/matrix-media.css" />
		<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />
		<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700,800' rel='stylesheet' type='text/css'>

	</head>
	<style>
		.content-info {
			overflow: auto;
		}
		
		.content-info span {
			padding: 6px 0;
			float: left;
			width: 50%;
			display: block;
		}
		
		.td-btn {
			width: 150px;
		}
		
		.table-striped td {
			padding: 37px 15px;
		}
	</style>

	<body>

		<div id="content">
			<div id="content-header">
				<h1>第一监测点</h1>
			</div>
			<div class="container-fluid">
				<div class="row-fluid">
					<div class="span6">
						<div class="span11">
							<div class="widget-box">
								<div class="widget-title"> <span class="icon"> <i class="icon-signal"></i> </span>
									<h5>侧向位移量</h5>
								</div>
								<div id="main" style="width: 450px;height:200px;"></div>
								<div style="width: 100px;position: absolute;top: 100px;right: 0;">
									<p style="margin-bottom: 30px;">预警值：7mm</p>
									<p>控制值：10mm</p>
								</div>
							</div>
						</div>

					</div>
					<div class="span6">
						<div class="widget-box">
							<div class="widget-title"> <span class="icon"> <i class="icon-th"></i> </span>
								<h5>监测信息</h5>
							</div>
							<div class="widget-content nopadding">
								<table class="table table-bordered table-striped">
									<thead>
										<tr>
											<th></th>
											<th></th>
											<th></th>
											<th></th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>日期</td>
											<td>2017-4-19</td>
											<td>2017-4-18</td>
											<td>2017-4-17</td>
											<td>2017-4-16</td>
										</tr>
										<tr>
											<td>检测值</td>
											<td>1mm</td>
											<td>3mm</td>
											<td>5mm</td>
											<td>7mm</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
				<div class="row-fluid">
					<div class="span6">
						<div class="span11">
							<div class="widget-box">
								<div class="widget-title"> <span class="icon"> <i class="icon-signal"></i> </span>
									<h5>沉降量</h5>
								</div>
								<div id="main1" style="width: 450px;height:200px;"></div>
								<div style="width: 100px;position: absolute;top: 100px;right: 0;">
									<p style="margin-bottom: 30px;">预警值：17mm</p>
									<p>控制值：20mm</p>
								</div>
							</div>
						</div>

					</div>
					<div class="span6">
						<div class="widget-box">
							<div class="widget-title"> <span class="icon"> <i class="icon-th"></i> </span>
								<h5>监测信息</h5>
							</div>
							<div class="widget-content nopadding">
								<table class="table table-bordered table-striped">
									<thead>
										<tr>
											<th></th>
											<th></th>
											<th></th>
											<th></th>
											<th></th>
										</tr>
									</thead>
									<tbody>
										<tr>
											<td>日期</td>
											<td>2017-4-19</td>
											<td>2017-4-18</td>
											<td>2017-4-17</td>
											<td>2017-4-16</td>
										</tr>
										<tr>
											<td>检测值</td>
											<td>2mm</td>
											<td>4mm</td>
											<td>6mm</td>
											<td>8mm</td>
										</tr>
									</tbody>
								</table>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<script src="js/jquery.min.js"></script>
		<script src="js/jquery.ui.custom.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery.uniform.js"></script>
		<script src="js/select2.min.js"></script>
		<script src="js/jquery.dataTables.min.js"></script>
		<script src="js/matrix.js"></script>
		<script src="js/matrix.tables.js"></script>
		<script src="js/echarts.min.js"></script>
		<script>
			var myChart = echarts.init(document.getElementById('main'));
			var myChart1 = echarts.init(document.getElementById('main1'));
			option = {
				toolbox: {
					show: true,
					feature: {
						dataZoom: {
							yAxisIndex: 'none'
						},
						dataView: {
							readOnly: false
						},
						magicType: {
							type: ['line', 'bar']
						},
						restore: {},
						saveAsImage: {}
					}
				},
				xAxis: {
					type: 'category',
					boundaryGap: false,
					data: ['2017-4-16', '2017-4-17', '2017-4-18', '2017-4-19']
				},
				yAxis: {
					type: 'value',
					axisLabel: {
						formatter: '{value} mm'
					}
				},
				series: [{
					name: '最低气温',
					type: 'line',
					data: [1, 2, 2, 5, 3, 2, 0],
					markPoint: {
						data: [{
							name: '周最低',
							value: -2,
							xAxis: 1,
							yAxis: -1.5
						}]
					},
					markLine: {
						data: [{
								type: 'average',
								name: '平均值'
							},
							[{
								symbol: 'none',
								x: '90%',
								yAxis: 'max'
							}, {
								symbol: 'circle',
								label: {
									normal: {
										position: 'start',
										formatter: '最大值'
									}
								},
								type: 'max',
								name: '最高点'
							}]
						]
					}
				}]
			};
			myChart.setOption(option);
			myChart1.setOption(option);
		</script>

	</body>

</html>